<!-- Site Setting Panel -->
<section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<!-- Page Header Start -->


<div class="pageheader">
  <h2><i class="fa fa-check-square"></i> Form Elements </h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="index.html"> Home </a> </li>
      <li class="active"> Form Elements </li>
    </ol>
  </div>
</div>
<!-- Page Header End -->

<div class="page">
<div class="row">
  <div class="col-lg-12"> 
    <!-- Input -->
    <div class="panel panel-default">
      <h4 class="nm pad-15"> General <strong> Form Elements </strong> </h4>
      <div class="panel-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label for="" class="col-sm-2">Normal input</label>
            <div class="col-sm-10">
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Rounded input</label>
            <div class="col-sm-10">
              <input type="text" class="form-control input-round">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="label-focus" class="col-sm-2">Label focus</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="label-focus">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">With help</label>
            <div class="col-sm-10">
              <input type="text" class="form-control">
              <span class="help-block">Some help text goes here.</span> </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Placeholder</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" placeholder="placeholder goes here">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Static control</label>
            <div class="col-lg-10">
              <p class="form-control-static">email@example.com</p>
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Disabled</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" disabled value="disabled">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Predefined value</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" value="http://">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Input with tooltip on focus</label>
            <div class="col-sm-10">
              <input tooltip="Tooltip on top" type="text" class="form-control" data-toggle="tooltip" data-placement="top" tooltip-trigger="focus">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Input with icons</label>
            <div class="col-sm-10">
              <input type="text" class="form-control">
              <span class="icon glyphicon glyphicon-star"></span> </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Input primary</label>
            <div class="col-sm-10">
              <input type="text" class="form-control input-primary">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Input info</label>
            <div class="col-sm-10">
              <input type="text" class="form-control input-info">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Input success</label>
            <div class="col-sm-10">
              <input type="text" class="form-control input-success">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Input warning</label>
            <div class="col-sm-10">
              <input type="text" class="form-control input-warning">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Input error</label>
            <div class="col-sm-10">
              <input type="text" class="form-control input-danger">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label class="col-sm-2">Checkboxes and radios</label>
            <div class="col-sm-10">
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="">
                  Option one is this and that</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
                  Option one is this and that</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                  Option two can be something else and selecting it will deselect option one </label>
              </div>
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label class="col-sm-2">Inline checkboxes</label>
            <div class="col-sm-10">
              <label class="checkbox-inline">
                <input type="checkbox" value="option1">
                a </label>
              <label class="checkbox-inline">
                <input type="checkbox" value="option2">
                b </label>
              <label class="checkbox-inline">
                <input type="checkbox" value="option3">
                c </label>
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label class="col-sm-2">Inline Custom checkboxes</label>
            <div class="col-sm-10">
              <label class="ui-checkbox">
                <input name="checkbox1" type="checkbox" value="option1">
                <span>Option 1</span></label>
              <label class="ui-checkbox">
                <input name="checkbox1" type="checkbox" value="option1">
                <span>Option 2</span></label>
              <label class="ui-checkbox">
                <input name="checkbox1" type="checkbox" value="option1">
                <span>Option 3</span></label>
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Control sizing</label>
            <div class="col-sm-10">
              <input type="text" class="form-control input-lg">
              <div class="divider"></div>
              <input type="text" class="form-control">
              <div class="divider"></div>
              <input type="text" class="form-control input-sm">
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Input Group</label>
            <div class="col-sm-10">
              <div class="input-group"> <span class="input-group-addon">@</span>
                <input type="text" class="form-control" placeholder="Username">
              </div>
              <div class="divider"></div>
              <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-addon">.00</span> </div>
              <div class="divider"></div>
              <div class="input-group"> <span class="input-group-addon">$</span>
                <input type="text" class="form-control">
                <span class="input-group-addon">.00</span> </div>
              <div class="divider"></div>
              <div class="input-group"> <span class="input-group-addon">
                <input type="checkbox">
                </span>
                <input type="text" class="form-control">
              </div>
              <div class="divider"></div>
              <div class="input-group"> <span class="input-group-addon">
                <input type="radio">
                </span>
                <input type="text" class="form-control">
              </div>
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Button addons</label>
            <div class="col-sm-10">
              <div class="row">
                <div class="col-lg-6">
                  <div class="input-group"> <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                    </span>
                    <input type="text" class="form-control">
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                    </span> </div>
                </div>
              </div>
            </div>
          </div>
          <div class="divider"></div>
          <div class="form-group">
            <label for="" class="col-sm-2">Textarea</label>
            <div class="col-sm-10">
              <textarea name="" id="" class="form-control" rows="4"></textarea>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- end Input --> 
    
  </div>
</div>
<div class="row">
  <div class="col-lg-12"> 
    
    <!-- Switch -->
    <div class="panel panel-default">
      <h4 class="nm pad-15"> Bootstrap <strong>Switch</strong> </h4>
      <div class="panel-body">
        <ul class="list-inline">
          <li>
            <label class="switch switch-primary">
              <input type="checkbox" checked>
              <i></i></label>
          </li>
          <li>
            <label class="switch switch-success">
              <input type="checkbox" checked>
              <i></i></label>
          </li>
          <li>
            <label class="switch switch-info">
              <input type="checkbox" checked>
              <i></i></label>
          </li>
          <li>
            <label class="switch switch-warning">
              <input type="checkbox" checked>
              <i></i></label>
          </li>
          <li>
            <label class="switch switch-danger">
              <input type="checkbox" checked>
              <i></i></label>
          </li>
        </ul>
      </div>
    </div>
    <!-- end Switch --> 
    
  </div>
</div>
<div class="row">
  <div class="col-lg-6"> 
    
    <!-- Switch -->
    <div class="panel panel-default">
      <h4 class="nm pad-15"> Bootstrap <strong> Radio Switch</strong> </h4>
      <div class="panel-body">
        <ul class="list-inline">
          <li>
            <label class="switch switch-info">
              <input type="radio" value="option1" name="switch" checked>
              <i></i></label>
          </li>
          <li>
            <label class="switch switch-danger">
              <input type="radio" value="option2" name="switch" checked>
              <i></i></label>
          </li>
        </ul>
      </div>
    </div>
    <!-- end Switch --> 
    
  </div>
  <div class="col-lg-6"> 
    
    <!-- Switch -->
    <div class="panel panel-default">
      <h4 class="nm pad-15"> Bootstrap <strong>Switch Size</strong> </h4>
      <div class="panel-body">
        <ul class="list-inline">
          <li>
            <label class="switch switch-primary switch-lg">
              <input type="checkbox" checked>
              <i></i></label>
          </li>
          <li>
            <label class="switch switch-success switch-md">
              <input type="checkbox" checked>
              <i></i></label>
          </li>
          <li>
            <label class="switch switch-info switch-sm">
              <input type="checkbox" checked>
              <i></i></label>
          </li>
          <li>
            <label class="switch switch-warning switch-xs">
              <input type="checkbox" checked>
              <i></i></label>
          </li>
        </ul>
      </div>
    </div>
    <!-- end Switch --> 
    
  </div>
</div>
<div class="row">
  <div class="col-lg-6"> 
    
    <!-- Angular Editable Text -->
    <div class="panel panel-default" ng-controller="lazyModelCtrl">
      <h4 class="nm pad-15"> Angular <strong>Editable Text</strong> </h4>
      <div class="panel-body"> <span>Username: <strong>{{user.name}}</strong></span>
        <button class="btn btn-default btn-sm" ng-click="formVisible=true" ng-show="!formVisible"><i class="fa fa-pencil"></i></button>
        <form ng-submit="formVisible=false" ng-show="formVisible">
          <input type="text" lazy-model="user.name">
          <button class="btn btn-default btn-sm" type="submit">save</button>
          <button class="btn btn-danger btn-sm" type="reset" ng-click="formVisible=false">cancel</button>
        </form>
      </div>
    </div>
    <!-- end Angular Editable Text --> 
    
  </div>
  <div class="col-lg-6"> 
    
    <!-- File upload button -->
    <div class="panel panel-default">
      <h4 class="nm pad-15"> File <strong>Upload Button </strong> </h4>
      <div class="panel-body">
        <input type="file" title="Choose File" data-ui-file-upload>
      </div>
    </div>
    <!-- end File upload button --> 
    
  </div>
</div>
<div class="row">
  <div class="col-lg-12"> 
    
    <!-- Radio buttons and checkbox -->
    <div class="panel panel-default">
      <h4 class="nm pad-15"> Radio <strong>Buttons & Checkbox</strong> </h4>
      <div class="panel-body">
        <dl class="dl-horizontal">
          <dt>Radio buttons</dt>
          <dd>
            <label class="ui-radio">
              <input name="radio1" type="radio" value="option1" >
              <span>Option 1</span></label>
            <label class="ui-radio">
              <input name="radio1" type="radio" value="option2" checked>
              <span>Option 2</span></label>
            <label class="ui-radio">
              <input name="radio1" type="radio" value="option3">
              <span>Option 3</span></label>
          </dd>
          <dt>Disabled radio buttons</dt>
          <dd>
            <label class="ui-radio">
              <input name="radio2" type="radio" value="option3" disabled>
              <span>Radio disabled</span></label>
            <label class="ui-radio">
              <input name="radio2" type="radio" value="option4" checked disabled>
              <span>Radio checked disabled</span></label>
          </dd>
        </dl>
        <dl class="dl-horizontal">
          <dt> Checkbox </dt>
          <dd class="pb-10">
            <label class="ui-checkbox">
              <input name="checkbox1" type="checkbox" value="option1" >
              <span>Option 1</span></label>
            <label class="ui-checkbox">
              <input name="checkbox1" type="checkbox" value="option2" checked>
              <span>Option 2</span></label>
            <label class="ui-checkbox">
              <input name="checkbox1" type="checkbox" value="option3">
              <span>Option 3</span></label>
          </dd>
          <dt> Disabled Checkbox </dt>
          <dd>
            <label class="ui-checkbox">
              <input name="checkbox2" type="checkbox" value="option3" disabled>
              <span>Radio disabled</span></label>
            <label class="ui-checkbox">
              <input name="checkbox2" type="checkbox" value="option4" checked disabled>
              <span>Radio checked disabled</span></label>
          </dd>
        </dl>
      </div>
    </div>
    <!-- end Radio buttons and checkbox --> 
    
  </div>
</div>
<div class="row">
  <div class="col-lg-6"> 
    
    <!-- Select -->
    <div class="panel panel-default">
      <h4 class="nm pad-15"> Angular <strong>Select</strong> </h4>
      <div class="panel-body"> <span class="ui-select">
        <select>
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Barbecue</option>
        </select>
        </span> </div>
    </div>
    <!-- end Select --> 
    
  </div>
  <div class="col-lg-6"> 
    
    <!-- Spinner -->
    <div class="panel panel-default">
      <h4 class="nm pad-15"> Angular <strong>Spinner</strong> </h4>
      <div class="panel-body">
        <div class="row">
          <div class="col-xs-6">
            <div class="input-group" data-ui-spinner>
              <input type="text" class="form-control" value="1">
              <div class="input-group-btn btn-group-vertical">
                <button type="button" class="btn btn-xs btn-default" data-spin="up"> <i class="fa fa-angle-up"></i> </button>
                <button type="button" class="btn spinner-down btn-xs btn-default" data-spin="down"> <i class="fa fa-angle-down"></i> </button>
              </div>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="input-group" data-ui-spinner> <span class="input-group-btn">
              <button type="button" class="btn btn-default" data-spin="up"> <i class="fa fa-plus"></i> </button>
              </span>
              <input type="text" class="spinner-input form-control">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default" data-spin="down"> <i class="fa fa-minus"></i> </button>
              </span> </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end Spinner --> 
    
  </div>
</div>
<div class="row">
  <div class="col-lg-12"> 
    
    <!-- Range sliders -->
    <div class="panel panel-default">
      <h4 class="nm pad-15"> Angular <strong>Slider</strong> </h4>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-6">
            <h5>Basic slider</h5>
            <input type="text"
                           ui-range-slider
                           data-slider-min="0"
                           data-slider-max="10"
                           data-slider-step="1"
                           data-slider-orientation="horizontal"
                           data-slider-value="6"
                           data-slider-selection="before"
                           data-slider-tooltip="show"
                           data-slider-handle="round">
            <h5>Range slider disabled</h5>
            <input type="text"
                           ui-range-slider
                           data-slider-min="0"
                           data-slider-max="10"
                           data-slider-step="1"
                           data-slider-orientation="horizontal"
                           data-slider-value="5"
                           data-slider-selection="before"
                           data-slider-tooltip="show"
                           data-slider-handle="round"
                           data-slider-enabled="false">
            <h5>Range slider with step set to 10</h5>
            <input type="text"
                           value=""
                           ui-range-slider
                           data-slider-min="0"
                           data-slider-max="100"
                           data-slider-step="10"
                           data-slider-orientation="horizontal"
                           data-slider-value="60"
                           data-slider-selection="before"
                           data-slider-tooltip="show"
                           data-slider-handle="round">
            <h5>Range slider with predifined value to 30</h5>
            <input type="text"
                           value=""
                           ui-range-slider
                           data-slider-min="0"
                           data-slider-max="100"
                           data-slider-step="10"
                           data-slider-orientation="horizontal"
                           data-slider-value="30"
                           data-slider-selection="before"
                           data-slider-tooltip="show"
                           data-slider-handle="round">
            <h5>Range slider with range</h5>
            <input type="text"
                           value=""
                           ui-range-slider
                           data-slider-min="0"
                           data-slider-max="100"
                           data-slider-step="10"
                           data-slider-orientation="horizontal"
                           data-slider-value="[20, 80]"
                           data-slider-selection="before"
                           data-slider-tooltip="show"
                           data-slider-handle="round">
          </div>
          <div class="col-md-6">
            <h5>Vertical slider</h5>
            <ul class="list-inline">
              <li class="pad-15">
                <input type="text" ui-range-slider data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-orientation="vertical" data-slider-value="5" data-slider-selection="before" data-slider-tooltip="show" data-slider-handle="round">
              </li>
              <li class="pad-15">
                <input type="text" ui-range-slider data-slider-min="0" data-slider-max="10" data-slider-step="5" data-slider-orientation="vertical" data-slider-value="50" data-slider-selection="before" data-slider-tooltip="show" data-slider-handle="round">
              </li>
              <li class="pad-15">
                <input type="text" ui-range-slider data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-orientation="vertical" data-slider-value="30" data-slider-selection="before" data-slider-tooltip="show" data-slider-handle="round">
              </li>
              <li class="pad-15">
                <input type="text" ui-range-slider data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-orientation="vertical" data-slider-value="[10, 90]" data-slider-selection="before" data-slider-tooltip="show" data-slider-handle="round">
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- end Range sliders --> 
      
    </div>
  </div>
 </div>
  <div class="row">
    <div class="col-lg-12"> 
      
      <!-- Timepicker -->
      <div class="panel panel-default">
        <h4 class="nm pad-15"> Angular <strong>Timepicker</strong> </h4>
        <div class="panel-body" data-ng-controller="TimepickerDemoCtrl">
          <div class="row">
            <div class="col-sm-4">
              <div ng-model="mytime" ng-change="changed()" style="display:inline-block;">
                <timepicker class="ui-timepicker" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
              </div>
            </div>
            <div class="col-sm-8">
              <p> Hours step is: <span class="ui-select">
                <select ng-model="hstep" ng-options="opt for opt in options.hstep">
                </select>
                </span> </p>
              <p> Minutes step is: <span class="ui-select">
                <select ng-model="mstep" ng-options="opt for opt in options.mstep">
                </select>
                </span> </p>
              <ul class="list-inline">
                <li>
                  <button class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
                </li>
                <li>
                  <button class="btn btn-default" ng-click="update()">Set to 14:00</button>
                </li>
                <li>
                  <button class="btn btn-danger" ng-click="clear()">Clear</button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- end Timepicker --> 
      
    </div>
  </div>
  
  <div class="row">
    <div class="col-lg-12"> 
      
      <!-- Datepicker -->
      <div class="panel panel-default">
        <h4 class="nm pad-15"> Angular <strong>Datepicker</strong> </h4>
        <div class="panel-body" data-ng-controller="DatepickerDemoCtrl">
          <div class="row">
            <div class="col-sm-4">
              <div class="input-group ui-datepicker">
                <input type="text" 
                               class="form-control"
                               datepicker-popup="{{format}}"
                               ng-model="dt"
                               is-open="opened"
                               min="minDate"
                               max="'2015-06-22'"
                               datepicker-options="dateOptions" 
                               date-disabled="disabled(date, mode)"
                               ng-required="true" 
                               close-text="Close">
                <span class="input-group-addon" ng-click="open($event)"><i class="fa fa-calendar"></i></span> </div>
            </div>
            <div class="col-sm-8">
              <p> Format: <span class="ui-select">
                <select ng-model="format" ng-options="f for f in formats">
                </select>
                </span> </p>
              <ul class="list-inline">
                <li>
                  <button class="btn btn-sm btn-info" ng-click="today()">Today</button>
                </li>
                <li>
                  <button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
                </li>
                <li>
                  <button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
                </li>
                <li>
                  <button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
                </li>
                <li>
                  <button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- end Datepicker --> 
      
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12"> 
      
      <!-- Tags -->
      <div class="panel panel-default">
        <h4 class="nm pad-15"> Angular <strong>Tags Input</strong> </h4>
        <div class="panel-body" data-ng-controller="TagsDemoCtrl">
          <tags-input ng-model="tags" class="ui-tags-input"></tags-input>
        </div>
      </div>
      <!-- end Tags --> 
      
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12"> 
      
      <!-- Editor -->
      <div class="panel panel-default">
        <h4 class="nm pad-15"> Bootstrap <strong>Editor</strong> </h4>
        <div class="panel-body">
          <div text-angular ng-model="mailContent" class="ui-editor">
            <h2>Try me!</h2>
             <p>textAngular is a super cool WYSIWYG Text Editor directive for AngularJS</p>
             <p><b>Features:</b></p>
             <ol>
              <li>Automatic Seamless Two-Way-Binding</li>
              <li>Super Easy <b>Theming</b> Options</li>
              <li style="color: green;">Simple Editor Instance Creation</li>
              <li>Safely Parses Html for Custom Toolbar Icons</li>
              <li>Works with Firefox, Chrome, and IE8+</li>
            </ol>
             <p><b>Code at GitHub:</b> <a href="https://github.com/fraywing/textAngular">Here</a> </p>
          </div>
        </div>
      </div>
      <!-- end Editor --> 
      
    </div>
  </div>
</div>
